import styled from "@emotion/styled"
import PageHeader from "../subComponents/PageHeader"
import TimeBox from "../components/TimeBox"
import BetInfoCard from "../subComponents/BetInfoCard"
import BetListCard from "../subComponents/BetList"
import SlotBettingRankingsPopup, {
    ActionType,
} from "@/pages/Walfare/components/SlotBettingRankingsPopup"
import { useState } from "react"
import { SvgComponent } from "@/components/base/Svg"

const Root = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    background:
        radial-gradient(
            136.79% 100% at 100% 0%,
            rgba(255, 184, 219, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
            100% 61.68% at 0% 100%,
            rgba(179, 255, 204, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        #ebf3ff;
    & > img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
`

const PageContent = styled.div`
    width: 100%;
    margin-top: 44rem;
    padding: 12rem;
`

const DailyContest = styled.div`
    width: 100%;
    height: 124rem;
    background-color: #fff;
    border-radius: 10rem;
    position: relative;
    overflow: hidden;
    .daily-contest-rule {
        position: absolute;
        top: 8rem;
        right: 12rem;
        display: flex;
        align-items: center;
        gap: 4rem;
        .daily-contest-rule-icon {
            border-radius: 50%;
            border: 1.5rem solid #165dff;
            border: 1.5rem solid #165dff;
            width: 14rem;
            height: 14rem;
            font-size: 12rem;
            text-align: center;
            color: #165dff;
            color: #165dff;
            font-weight: 500;
        }
        .daily-contest-rule-text {
            font-size: 12rem;
            color: #165dff;
            color: #165dff;
            font-weight: 500;
        }
    }
    .daily-contest-title {
        padding-top: 12rem;
        text-align: center;
        height: 20rem;
        line-height: 20rem;
        font-size: 14rem;
        font-weight: 700;
        color: #000000;
        letter-spacing: 0%;
        box-sizing: content-box;
    }
    .daily-contest-prize-pool {
        height: 16rem;
        line-height: 16rem;
        font-size: 12rem;
        font-weight: 700;
        color: #6b7785;
        color: #6b7785;
        margin-left: 28rem;
        width: 170rem;
        text-align: center;
        margin-bottom: 4rem;
        margin-top: 20rem;
    }
    .daily-contest-prize-pool-amount {
        width: 170rem;
        height: 40rem;
        line-height: 40rem;
        font-size: 20rem;
        font-weight: 700;
        margin-left: 28rem;
        color: #ff4757;
        color: #ff4757;
        text-align: center;
        background-color: #f2f3f5;
        background-color: #f2f3f5;
        border-radius: 8rem;
    }
`

const DailyContestBg = styled(SvgComponent("pages/Walfare/svg/daily_contest_bg.svg"))`
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
`
const TrophySvg = styled(SvgComponent("pages/Walfare/svg/trophy_b3.svg"))`
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100rem;
    height: 96rem;
`

const TimeRemaining = styled.div`
    width: 100%;
    height: 76rem;
    padding: 12rem;
    background-color: #fff;
    border-radius: 8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12rem 0;
    > p {
        font-size: 14rem;
        font-weight: 700;
        color: #1d2129;
        color: #1d2129;
        padding-left: 4rem;
    }
`

export default function BettingRank() {
    const [currentAction, setCurrentAction] = useState<ActionType>("")
    const handleTimeUp = () => {
        console.log("Time is up!")
    }

    const handleHistoryClick = () => {
        console.log("History clicked")
        setCurrentAction("history")
    }

    const handleBetClick = () => {
        console.log("Bet clicked")
        setCurrentAction("time")
    }

    return (
        <>
            <Root>
                <PageHeader title="Slot Betting Rankings" />
                <PageContent>
                    <DailyContest>
                        <DailyContestBg />
                        <TrophySvg />
                        <div
                            className="daily-contest-rule"
                            onClick={() => setCurrentAction("rules")}
                        >
                            <span className="daily-contest-rule-icon">?</span>
                            <span className="daily-contest-rule-text">Rule</span>
                        </div>
                        <div className="daily-contest-title">Daily Contest</div>
                        <div className="daily-contest-prize-pool">Contest prize pool</div>
                        <div className="daily-contest-prize-pool-amount">₱ 100,000.00</div>
                    </DailyContest>

                    <TimeRemaining>
                        <p>Time Reamaining</p>
                        <TimeBox
                            seconds={3666}
                            onTimeUp={handleTimeUp}
                        />
                    </TimeRemaining>

                    <BetInfoCard
                        onHistoryClick={handleHistoryClick}
                        onBetClick={handleBetClick}
                    />

                    <BetListCard onHistoryClick={() => setCurrentAction("time")} />
                </PageContent>
            </Root>
            <SlotBettingRankingsPopup
                action={currentAction}
                clearAction={() => setCurrentAction("")}
            />
        </>
    )
}
